<script setup>
import RecommendingItem from "@/components/RecommendingItem.vue";
import CommonModal from "@/components/modal/CommonModal.vue";
import { ref, watch, onMounted } from "vue";
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { useFileSelect } from "@/composables/fileSelect";
import { useCreate } from "@/store/useCreate.js";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";

const { selectedFile, triggerFileSelect, uploadFile } = useFileSelect();
const createStore = useCreate();
const { formData } = storeToRefs(createStore);

onMounted(() => {
  if (formData.value.coverPicList.length > 0) {
    img.value = formData.value.coverPicList[0].url;
  }
});

watch(selectedFile, (File) => {
  // 把File Blob转成Url
  cropOption.value.img = URL.createObjectURL(File);
  imgCropModalShow.value = true;
});

const imgCropModalShow = ref(false);
const cropper = ref();
const img = ref("");
const cropOption = ref({
  size: 1,
  outputType: "png",
  autoCrop: true, // 是否开启截图框
  full: false, // 是否输出原图比例
  infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  img: "",
  fixedNumber: [4, 3],
  fillColor: "#000",
  canMove: true,
  autoCropWidth: 400,
  autoCropHeight: 300,
  fixedBox: true,
});
// 获取截图blob
const uploadloading = ref(false);
const modalConfirm = () => {
  cropper.value.getCropBlob(async (data) => {
    try {
      uploadloading.value = true;
      img.value = URL.createObjectURL(data);
      const upload = await uploadFile(data);
      if (upload && upload.code === 200) {
        createStore.formData.coverPicList[0] = {
          url: upload.data.url,
          type: 1, // 标识图片类型
        };
      }
    } catch (e) {
      uploadloading.value = false;
    } finally {
      uploadloading.value = false;
    }
  });
  imgCropModalShow.value = false;
};
const delImg = () => {
  img.value = "";
};
//
const confirm = () => {
  if (!img.value) {
    return ElMessage.warning("请上传封面图片");
  }
  // createStore.formData.coverPicList[0] = {
  //   url: img.value,
  //   type: 1, // 标识图片类型
  // };
  createStore.setCurrentStepId(8);
  createStore.setRequiredNumber(7, 0);
};
</script>

<template>
  <div class="header">
    <div class="left">
      <h4>列表封面</h4>
      <p>卖点清晰, 真人出镜的封面可以大幅提升点击率</p>
    </div>
    <div>
      <el-button class="confirm-btn" @click="confirm">确认</el-button>
    </div>
  </div>
  <div class="cover-box">
    <div class="cover-upload">
      <h3 class="title">列表封面</h3>
      <div
        class="upload"
        @click="triggerFileSelect"
        v-loading="uploadloading"
        element-loading-text="上传中..."
      >
        <img v-if="!img" class="add-icon" src="@/assets/img-icon.png" alt="" />
        <span class="add-text">+ {{ img ? "替换图片" : "上传图片" }}</span>
        <img v-if="img" class="img-bg" :src="img" alt="" />
        <span v-if="img" class="del-img" @click.stop="delImg"
          ><img src="@/assets/del-icon-white.png" alt=""
        /></span>
      </div>
      <p class="tips">封面创建提示：</p>
      <ul>
        <li>图片比例4:3，建议真人出镜，给买家真实感和亲和力</li>
        <li>文字显示清晰，重点突出，买家可通过封面明确了解服务内容</li>
      </ul>
    </div>
    <div class="show-list">
      <h4>封面预览</h4>
      <div class="list">
        <RecommendingItem :userImg="img" />
        <RecommendingItem :userImg="img" />
        <RecommendingItem :userImg="img" />
        <RecommendingItem :userImg="img" />
        <RecommendingItem :userImg="img" />
      </div>
    </div>
  </div>
  <!-- 裁剪图片 -->
  <CommonModal
    title="裁剪图片"
    v-if="imgCropModalShow && selectedFile"
    @confirm="modalConfirm"
    @close="imgCropModalShow = false"
  >
    <template #content>
      <p class="cropper-tips">
        为确保封面和头图预览视觉效果，图片需裁剪成4：3尺寸
      </p>
      <div class="cropper-box">
        <vue-cropper
          style="width: 100%; height: 100%"
          ref="cropper"
          :outputSize="cropOption.size"
          :outputType="cropOption.outputType"
          :img="cropOption.img"
          :infoTrue="cropOption.infoTrue"
          :full="cropOption.full"
          :auto-crop="cropOption.autoCrop"
          :fixedNumber="cropOption.fixedNumber"
          :fillColor="cropOption.fillColor"
          :canMove="cropOption.canMove"
          :autoCropWidth="cropOption.autoCropWidth"
          :autoCropHeight="cropOption.autoCropHeight"
          :fixedBox="cropOption.fixedBox"
        >
        </vue-cropper>
      </div>
    </template>
  </CommonModal>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;

  .left {
    flex: 1;

    h4 {
      font-size: 16px;
      margin-bottom: 8px;
    }

    p {
      color: rgba(25, 30, 40, 0.48);
      font-size: 14px;
    }
  }

  .confirm-btn {
    width: 160px;
    height: 48px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    color: #fff;
    font-size: 16px;
    border: none;
  }
}
.cover-box {
  display: flex;
  margin-top: 30px;
  .cover-upload {
    width: 500px;
    flex: 0 0 500px;
    margin-right: 50px;
    .title {
      font-size: 16px;
      margin-bottom: 24px;
    }
    .upload {
      width: 100%;
      height: 368px;
      background: #f6f8f9;
      border-radius: 16px 16px 16px 16px;
      border: 1px solid rgba(25, 30, 40, 0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      .add-icon {
        width: 120px;
        height: 86px;
        margin-bottom: 48px;
      }
      .add-text {
        width: 108px;
        height: 36px;
        background: #ffffff;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid rgba(25, 30, 40, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #191e28;
        user-select: none;
        cursor: pointer;
        position: relative;
        z-index: 2;
      }
      .img-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .del-img {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        background: rgba(25, 30, 40, 0.4);
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 16px 0 16px;
        cursor: pointer;
        img {
          width: 24px;
          height: 24px;
        }
      }
    }
    .tips {
      color: #191e28;
      margin-bottom: 5px;
    }
    ul {
      padding-left: 18px;
      color: rgba(25, 30, 40, 0.48);
      line-height: 24px;
    }
  }
  .show-list {
    background: #f9fafb;
    border-radius: 16px 16px 16px 16px;
    max-height: 800px;
    overflow-y: auto;
    padding: 20px;
    h4 {
      font-size: 16px;
      margin-bottom: 16px;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
  }
}
.cropper-tips {
  color: rgba(25, 30, 40, 0.48);
  margin-top: 6px;
  margin-bottom: 16px;
}
.cropper-box {
  width: 500px;
  height: 500px;
}
</style>